<script setup lang="ts">
import type { GetClinicScheduleRespVO } from '@/api/clinic-schedule';
import { computed } from 'vue';
import { DictKeyEnum } from '@/enums/dict.enums';
import { useDictStore } from '@/store/dictStore';
import { buildAssetSource } from '@/utils';

const props = defineProps<{
  doctorItem: GetClinicScheduleRespVO
}>();

const emit = defineEmits(['select']);

function handleSelect() {
  if (!canAvailable.value) {
    uni.showToast({
      title: '预约已满',
      icon: 'none'
    });
    return;
  }
  emit('select');
}

const { getDictLabel } = useDictStore();

const buildDoctorCover = computed(() => {
  return props.doctorItem.doctorImg || buildAssetSource('doctor-cover.png');
});

const canAvailable = computed(() => {
  return props.doctorItem.count > 0;
});
</script>

<template>
  <view class="doctor-item flex" :class="{ disabled: !canAvailable }" @click="handleSelect">
    <view class="doctor-item__cover">
      <image :src="buildDoctorCover" />
      <view class="doctor-item__reserve flex-center">
        可预约: {{ doctorItem.count }}
      </view>
    </view>
    <view class="doctor-item__content w-0 flex-1">
      <view class="doctor-item__info flex items-center">
        <view class="doctor-item__name">
          {{ doctorItem.doctorName }}
        </view>
        <view class="divider ml-14 mr-10" />
        <view class="doctor-item__title">
          {{ getDictLabel(doctorItem.professionalTitle, DictKeyEnum.EMPLOYEE_TITLE) }}
        </view>
      </view>
      <view class="doctor-item__sub mt-10 flex items-center">
        <view class="doctor-item__room">
          心血管疾病
        </view>
        <view class="divider ml-14 mr-10" />
        <view class="doctor-item__cost flex items-center">
          挂号费：<view class="cost-number">
            ￥{{ doctorItem.registrationFee }}.00
          </view>
        </view>
      </view>
      <view class="doctor-item__desc line-clamp-2">
        {{ doctorItem.personalProfile }}
      </view>
    </view>
    <view class="doctor-item__score">
      5.0
    </view>
    <view class="doctor-item__time">
      {{ getDictLabel(doctorItem.clinicPeriod, DictKeyEnum.CLINIC_PERIOD) }}
    </view>
  </view>
</template>

<style lang="scss" scoped>
.doctor-item {
  background: #fff;
  border-radius: 20px;
  height: 281px;
  margin-bottom: 20px;
  padding: 39px 30px 38px 18px;
  box-sizing: border-box;
  position: relative;
  border: 2px solid transparent;

  .doctor-item__time {
    position: absolute;
    top: 150px;
    right: 30px;
    font-size: 24px;
    font-weight: 600;
    color: #1c2b36;
  }

  .doctor-item__score {
    position: absolute;
    font-size: 28px;
    right: 30px;
    top: 53px;
    font-weight: 500;
    color: #ff6700;
  }

  .divider {
    background: var(--bg-color);
    width: 4px;
    height: 22px;
  }

  .doctor-item__cover {
    width: 204px;
    height: 204px;
    position: relative;
    margin-right: 24px;
    border-radius: 50%;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
    .doctor-item__reserve {
      position: absolute;
      bottom: 18px;
      left: 36px;
      height: 41px;
      padding: 0 12px;
      border-radius: 100px;
      border: 2px solid #ffffff;
      background: #e5f0ff;
      box-sizing: border-box;
      font-size: 22px;
      font-weight: 500;
      color: var(--primary);
    }
  }

  .doctor-item__name {
    font-size: 48px;
    font-weight: bold;
    color: var(--text-color);
  }

  .doctor-item__title {
    font-size: 22px;
    color: #3b3b3b;
  }

  .doctor-item__room {
    background: #dfecff;
    border-radius: 100px;
    color: var(--primary);
    font-size: 16px;
    padding: 5px 13px;
  }

  .doctor-item__cost {
    color: #707070;
    font-size: 22px;
    .cost-number {
      font-size: 30px;
      font-weight: 600;
      color: var(--primary);
    }
  }

  .doctor-item__desc {
    font-size: 24px;
    line-height: 37px;
    color: #3d3d3d;
    margin-top: 12px;
    text-overflow: ellipsis;
    box-sizing: border-box;
    padding-right: 160px;
  }

  &.disabled {
    background: #e3eeff;
    border: 2px solid rgba(255, 255, 255, 0.5);

    .doctor-item__cover {
      .doctor-item__reserve {
        color: #63768f;
        background: #e2ecf9;
      }
    }
  }
}
</style>
